<template>
	<view class="earn-detail">
		<view class="earn-detail-money">
			<view>
				{{withdrawal_amount}}
				<view class="can_icon">可提现</view>
			</view>
			<view>我的余额(元)</view>
			<view v-if="daiqueren>0&&is_partner==1">
				待确认合伙人收益：￥{{daiqueren}}
			</view>
		</view>
		<view class="earn-detail-situation">
			<view class="detail-situation">
				<view v-if="(is_partner==1&&index==4)||index<4" class="common-style" v-for="(item,index) in earningsList" :key="index">
					<text>{{item.value}}</text>
					<text>{{item.name}}</text>
				</view>
				<view class="line"></view>
			</view>
			<view class="deposit-weiixn">
				<view @click="depositClick">
					提现到微信零钱
				</view>
				<view>
					1-3个工作日到账
				</view>
			</view>
		</view>
		<view class="earn-expend-detail">
			<view class="earn-expend">
				<view :class="type == index?'lottery-active':''" v-for="(item,index) in earnExpend" :key="index" @click="chooseResult(index)">
					{{item}}
				</view>
			</view>
			<!-- 收益明细 -->
			<view v-if="type == 0">
				<scroll-view class="swiper" scroll-x="true" scroll-with-animation>
					<block v-if="(is_partner==1&&index==4)||index<4" v-for="(item,index) in typeEarningsList" :key='index' :class="income_type==index?'swripe-active':''">
						<view :class="income_type==index?'swripe-active':''" @click="chooseClick(item.value,index)">{{item.name}}</view>
					</block>
				</scroll-view>
				<!-- 成就收益 -->
				<view class="money-detail" v-if="income_type == 0">
					<view>
						<text>成就值占比越高，收益越大</text>
					</view>
					<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:500px'" @scrolltolower="loadingMore">
						<view class="money-detail-situation" v-for="(one,index) in list" :key="index">
							<view>
								{{showtime(one.create_time)}}
							</view>
							<view>
								+{{one.value}}
							</view>
						</view>
					</scroll-view>
					<view v-else class="money-detail-situation" v-for="(one,index) in list" :key="index">
						<view>
							{{showtime(one.create_time)}}
						</view>
						<view>
							+{{one.value}}
						</view>
					</view>
				</view>
				<!-- 幸运福袋收益 -->
				<view class="money-detail" v-if="income_type == 1">
					<view>
						<text>每天解谜越多抢福袋，收益越大</text>
					</view>
					<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:500px'" @scrolltolower="loadingMore">
						<view class="money-detail-situation" v-for="(one,index) in list" :key="index">
							<view>
								{{showtime(one.create_time)}}
							</view>
							<view>
								+{{one.value}}
							</view>
						</view>
					</scroll-view>
					<view v-else class="money-detail-situation" v-for="(one,index) in list" :key="index">
						<view>
							{{showtime(one.create_time)}}
						</view>
						<view>
							+{{one.value}}
						</view>
					</view>
				</view>
				<!-- 分享收益 -->
				<view class="money-detail-share" v-else-if="income_type == 2">
									<view>
										<text>推荐活动越多，收益越大</text>
									</view>
									<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:600px'" @scrolltolower="loadingMore">
										<view class="money-detail-image" v-for="(one,index) in list" :key="index">
											<view>
												<image :src="one.avatar" mode=""></image>
												<view style="margin-left: 20upx;">
													<text>{{one.nickname}}</text>
													<text>{{showtime(one.create_time)}}</text>
												</view>
											</view>
											<view>
												+{{one.value}}
											</view>
										</view>
									</scroll-view>
									<view v-else class="money-detail-image" v-for="(one,index) in list" :key="index">
										<view>
											<image :src="one.avatar" mode=""></image>
											<view style="margin-left: 20upx;">
												<text>{{one.nickname}}</text>
												<text>{{showtime(one.create_time)}}</text>
											</view>
										</view>
										<view>
											+{{one.value}}
										</view>
									</view>
								</view>
				<!-- 队长收益 -->
				<view class="money-detail" v-if="income_type == 3">
					<view>
						<text>招募队员占比越高，收益越大</text>
					</view>
					<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:500px'" @scrolltolower="loadingMore">
						<view class="money-detail-situation" v-for="(one,index) in list" :key="index">
							<view>
								{{showtime(one.create_time)}}
							</view>
							<view>
								+{{one.value}}
							</view>
						</view>
					</scroll-view>
					<view v-else class="money-detail-situation" v-for="(one,index) in list" :key="index">
						<view>
							{{showtime(one.create_time)}}
						</view>
						<view>
							+{{one.value}}
						</view>
					</view>
				</view>
				<!-- 合伙人收益 -->
				<view class="money-detail-share" v-else-if="income_type == 4&&is_partner==1">
					<view>
						<text>成功推荐越多，收益越大</text>
					</view>
					<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:600px'" @scrolltolower="loadingMore">
						<view class="money-detail-image" v-for="(one,index) in list" :key="index">
							<view>
								<image :src="one.avatar" mode=""></image>
								<view style="margin-left: 20upx;">
									<text>{{one.nickname}}</text>
									<text>{{showtime(one.create_time)}}</text>
								</view>
							</view>
							<view>
								<view style="color:#666;width:100upx;text-align:right;font-size:28upx;" v-if="one.status==3">已失效</view>
								<view style="color:#FF3C00;width:100upx;text-align:right;font-size:28upx;" v-if="one.status==2">已确认</view>
								<view style="color:#666;width:100upx;text-align:right;font-size:28upx;" v-if="one.status==1">待确认</view>
								+{{one.value}}
							</view>
						</view>
					</scroll-view>
					<view v-else class="money-detail-image" v-for="(one,index) in list" :key="index">
							<view>
								<image :src="one.avatar" mode=""></image>
								<view style="margin-left: 20upx;">
									<text>{{one.nickname}}</text>
									<text>{{showtime(one.create_time)}}</text>
								</view>
							</view>
							<view>
								<view style="color:#666;width:100upx;text-align:right;font-size:28upx;" v-if="one.status==3">已失效</view>
								<view style="color:#FF3C00;width:100upx;text-align:right;font-size:28upx;" v-if="one.status==2">已确认</view>
								<view style="color:#666;width:100upx;text-align:right;font-size:28upx;" v-if="one.status==1">待确认</view>
								+{{one.value}}
							</view>
					</view>
				</view>
			</view>
			<!-- 支出明细 -->
			<view v-else>
				<scroll-view class="swiper" scroll-x="true" scroll-with-animation>
					<block  v-for="(item,index) in expendList" :key='index' :class="pay_type==index?'swripe-active':''">
						<view :class="pay_type==index?'swripe-active':''" @click="chooseExpendClick(item.value,index)">{{item.name}}</view>
					</block>
				</scroll-view>
				<!-- 参与活动 -->
				<view class="join-activity" v-if="pay_type == 0">
					<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:1224px'" @scrolltolower="loadingMore">
						<view v-for="(one,index) in list" :key="index" class="join-item">
							<view>
								<image :src="one.img_src" mode=""></image>
							</view>
							<view>
								<view>{{one.title}}</view>
								<view>实付:<text>￥{{one.value}}</text></view>
							</view>
						</view>
					</scroll-view>
					<view v-else v-for="(one,index) in list" :key="index" class="join-item">
						<view>
							<image :src="one.img_src" mode=""></image>
						</view>
						<view>
							<view>{{one.title}}</view>
							<view>实付:<text>￥{{one.value}}</text></view>
						</view>
					</view>
				</view>
				<!-- 提现微信 -->
				<view class="money-detail-share" v-else-if="pay_type == 1">
					<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:604px'" @scrolltolower="loadingMore">
						<view class="money-detail-image" v-for="(one,index) in list" :key="index">
							<view>
								<image :src="one.avatar" mode=""></image>
								<view style="margin-left: 20upx;">
									<text>{{one.nickname}}</text>
									<text>{{showtime(one.create_time)}}</text>
								</view>
							</view>
							<view>
								-{{one.value}}
							</view>
						</view>
					</scroll-view>
					<view v-else class="money-detail-image" v-for="(one,index) in list" :key="index">
						<view>
							<image :src="one.avatar" mode=""></image>
							<view style="margin-left: 20upx;">
								<text>{{one.nickname}}</text>
								<text>{{showtime(one.create_time)}}</text>
							</view>
						</view>
						<view>
							-{{one.value}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<ending v-if="page==1||page>last_page"></ending>
	</view>
</template>

<script>
	import {formaIncomeTime,source_of_returns} from '@/common/util.js'
	import ending from '../../../common/ending.vue'
	export default{
		components:{ending},
		data(){
			return{
				token: this.$store.getters.getToken,
				png1: this.$imgUrl+'img/1.png',
				earningsList:[
					{name:'成就收益(元)',value:''},
					{name:'幸运福袋(元)',value:''},
					{name:'分享收益(元)',value:''},
					{name:'队长收益(元)',value:''},
					{name:'合伙人收益(元)',value:''}
				],
				earnExpend: ['收益明细','支出明细'],
				type: 0,
				typeEarningsList:[
					{name:'成就收益',value:''},
					{name:'幸运福袋收益',value:''},
					{name:'分享收益',value:''},
					{name:'队长收益',value:''},
					{name:'合伙人收益',value:''}
				],
				income_type: 2,
				expendList: [
					{name:'参与活动',value:''},
					{name:'提现微信',value:''},
				],
				pay_type: 0,
				withdrawal_amount: 0,
				is_partner: 1,//1显示合伙人，2不显示
				list: [],
                listone:[],
				last_page: 1,
				page: 1,
				daiqueren:0
			}
		},
		onLoad(options) {
            console.log(options,'----------------------')
			this.income_type = options.detail
		},
		onShow() {
            this.getData()
		},
		methods:{
            //时间戳
            showtime(time = +new Date()) {
              var date = new Date(time*1000 + 8 * 3600 * 1000); // 增加8小时
              return date.toJSON().substr(0, 19).replace('T', ' ');
            },
			// 获取我的收益数据
			getData() {
				this.last_page = 1
				this.page = 1
				this.list = []
                console.log(this.list,'88888888888888888------------')
				let data = {
					token: this.token,
					type: parseInt(this.type)+1, //1:收益明细,2:支出明细
					income_type: parseInt(this.income_type)+1,//收益类型:1.成就值,2.幸运福袋3.分享4.队长5.合伙人
					pay_type: parseInt(this.pay_type)+1,//支出类型:1.参与活动,2.提现微信
					page: 1,
					pagesize: 10
				}
				this.$api.get_my_income(data).then(res => {
                     console.log('获取我的收益数据',res)
                     console.log('incom_type',data);
					if(res.status) {
						this.daiqueren = res.daiqueren
						this.earningsList[0].value = res.data.my_income.achievement_income
						this.earningsList[1].value = res.data.my_income.lucky_bag_money
						this.earningsList[2].value = res.data.my_income.share_money
						this.earningsList[3].value = res.data.my_income.captain_income
						this.earningsList[4].value = res.data.my_income.partner_income
                        this.listone = res.data.from_user
						this.withdrawal_amount = res.data.my_income.withdrawal_amount
						this.is_partner = res.data.my_income.is_partner
						this.list = res.data.list.data
                        let test = this.list.data[0].create_time  //玄学代码，勿删
                        console.log(this.list,'999999999999999================')
						this.last_page = res.data.list.last_page
						for(let i=0;i<this.list.length;i++) {
                            console.log('i=',i,'------->',this.list[i])
							this.list[i].create_time = formaIncomeTime(this.list[i].create_time)
						}
                       
					}
				}).catch(err => {
					console.log('获取我的收益数据',err)
                    console.log('incom_type',data);
				})
                // this.$api.source_of_returns(data).then(res =>{
                //     console.log(res,'0000000000000000000000')
                //     if(res.status) {
                //         this.earningsList[2].from_user_name = res.data.from_user_name
                //         this.earningsList[2].from_user_avatar = res.data.from_user_avatar
                //     }
                // })
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.token,
						type: parseInt(this.type)+1, //1:收益明细,2:支出明细
						income_type: parseInt(this.income_type)+1,//收益类型:1.成就值,2.幸运福袋3.分享4.队长5.合伙人
						pay_type: parseInt(this.pay_type)+1,//支出类型:1.参与活动,2.提现微信
						page: this.page,
						pagesize: 10
					}
					this.$api.get_my_income(data).then(res => {
						if(res.status) {
							this.last_page = res.data.list.last_page
							for(let i=0;i<res.data.list.data.length;i++) {
								res.data.list.data[i].create_time = formaIncomeTime(res.data.list.data[i].create_time)
							}
							this.list = this.list.concat(res.data.list.data)
						}
						console.log('获取我的收益数据',res)
                        console.log('incom_type',data);
					}).catch(err => {
						console.log('获取我的收益数据',err)
					})
				}
			},
			chooseResult(index){
				this.type = index
				this.getData()
			},
			chooseClick(value,index){
				this.income_type = index
				this.getData()
			},
			chooseExpendClick(value,index){
				this.pay_type = index
				this.getData()
			},
			depositClick(){
				uni.navigateTo({
					url:'../depositWeiXin/depositWeiXin?withdrawal='+this.withdrawal_amount
				})
			}
		}
	}
</script>

<style>
	page{
		position: relative;
		background-color: #F5F6F9;
	}
	.earn-detail{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}
	.earn-detail-money{
		width: 100%;
		height: 408upx;
		background: url(https://lightplanet.tuanhaoke.cn/img/member/my_earnings_bg_img.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		padding-top: 56upx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.earn-detail-money>view:first-child {
		font-size: 60upx;
		display: flex;
		padding-left: 60upx;
	}
	.earn-detail-money>view:nth-child(2),.earn-detail-money>view:nth-child(3){
		font-size: 24upx;
		margin-top: 8upx;
	}
	.earn-detail-money .can_icon{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 18upx 18upx 18upx 0;
		font-size: 20upx;
		color: #00A66A;
	}
	.earn-detail-situation{
		width: 100%;
		height: 466upx;
		position: absolute;
		background: #FFFFFF;
		border-radius: 24upx 24upx 0 0;
		box-shadow: 0 -20upx 22upx 0 rgba(109, 107, 107, 0.27);
		top: 250upx;left: 0;
	}
	.detail-situation{
		display: flex;
		flex-wrap: wrap;
		position: relative;
		padding-top: 36upx;
		box-sizing: border-box;
	}
	.detail-situation .common-style {
		width: 248upx;
		height: 120upx;
	}
	.detail-situation>view:first-child,.detail-situation>view:nth-child(4){
		/* padding: 38upx 56upx 0 58upx;
		box-sizing: border-box; */
	}
	.detail-situation>view:nth-child(2),.detail-situation>view:nth-child(3),.detail-situation>view:nth-child(5){
		/* padding: 38upx 56upx 0 56upx;
		box-sizing: border-box; */
	}
	.common-style>text{
		display: block;
		text-align: center;
	}
	.common-style>text:first-child{
		color: #333333;
		font-size: 36upx;
		font-weight: 550;
	}
	.common-style>text:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
	}
	.line{
		width: 2upx;
		height: 46upx;
		border-left: 1px solid #EFEFEF;
		position: absolute;
		left: 250upx;top: 60upx;
	}
	.line:after{
		content: '';
		display: block;
		width: 2upx;
		height: 46upx;
		border-left: 1px solid #EFEFEF;
		position: absolute;
		left: 248upx;
	}
	.line:before{
		content: '';
		display: block;
		width: 2upx;
		height: 46upx;
		border-left: 1px solid #EFEFEF;
		position: absolute;
		top: 114upx;left: -2upx;
	}
	.deposit-weiixn{
		margin-top: 16upx;
	}
	.deposit-weiixn>view:first-child{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		background: linear-gradient(#CBEC00,#00A66A);
		border-radius: 44upx;
		color: #FFFCF2;
		box-shadow: 0 8upx 16upx 0 rgba(0,166,106,0.4);
		margin: 0 auto;
	}
	.deposit-weiixn>view:last-child{
		text-align: center;
		color: #333333;
		font-size: 24upx;
		margin-top: 24upx;
	}
	.earn-expend-detail{
		width: 100%;
		/* height: 455upx; */
		background: #FFFFFF;
		margin-top: 330upx;
		padding: 0 30upx;
		padding-top: 30upx;
		box-sizing: border-box;
	}
	.earn-expend{
		width: 100%;
		height: 64upx;
		border-radius: 34upx;
		display: flex;
		justify-content: space-between;
		background: #EFEFEF;
		color: #666666;
		text-align: center;
		font-size: 28upx;
		line-height: 64upx;
	}
	.earn-expend>view{
		width: 344upx;
	}
	.earn-expend .lottery-active{
		background: linear-gradient(to right,#4CCB31,#00B574);
		border-radius: 34upx;
		color: #FFFFFF;
	}
	.swiper{
		width: 100%;
		height: 68upx;
		background: white;
		margin-top: 10upx;
		/* padding-bottom: 12upx; */
		/* box-sizing: border-box; */
		flex-direction: row;
		/* text-align: center; */
		white-space: nowrap;
		border-bottom: 1upx solid #DEDEDE;
	}
	.swiper view{
		line-height: 68upx;
		display: inline-block;
		margin-left: 30upx;
		color: #999999;
		font-size: 26upx;
	}
	.swiper view:first-child{
		margin-left: 0;
	}
	.swiper .swripe-active{
		color: #00A66A;
		position: relative;
	}
	.swiper .swripe-active::after{
		position: absolute;
		content: '';
		width: 64upx;
		height: 4upx;
		background: #00A66A;
		bottom: 0upx;left: 50%;
		transform: translate(-50%,0);
	}
	.money-detail>view,.money-detail-situation{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.money-detail-share>view,.money-detail-image{
		width: 100%;
		padding: 20upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.money-detail-share>view:first-child>text,.money-detail>view:first-child>text{
		display: inline-block;
		width: 100%;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		color: #666666;
		font-size: 24upx;
		background: #F2F2F2;
		border-radius: 25upx;
	}
	.money-detail>view:last-child,.money-detail-share>view:last-child{
		border-bottom: none;
	}
	.money-detail-situation,.money-detail-image{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.money-detail-situation>view:first-child{
		color: #666666;
		font-size: 28upx;
	}
	.money-detail-situation>view:last-child{
		color: #FF5C46;
		font-size: 30upx;
	}
	.money-detail-image>view>image{
		border-radius: 50%;
		width: 80upx;
		height: 80upx;
	}
	.money-detail-image>view:first-child{
		display: flex;
	}
	.money-detail-image>view text{
		display: block;
	}
	.money-detail-image>view text:first-child{
		color: #666666;
		font-size: 30upx;
	}
	.money-detail-image>view text:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.money-detail-image>view:last-child{
		color: #FF5C46;
		font-size: 30upx;
	}
	.join-item{
		display: flex;
		/* justify-content: space-between; */
		width: 100%;
		padding: 28upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.12);
	}
	.join-item image{
		width: 240upx;
		height: 180upx;
	}
	.join-item>view:last-child{
		margin-left: 20upx;
		width: 430upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.join-item>view:last-child>view:first-child{
		color: #333333;
		font-size: 30upx;
		font-weight: 550;
		height: 84upx;
	}
	.join-item>view:last-child>view:last-child{
		font-size: 30upx;
		color: #999999;
		text-align: right;
	}
	.join-item>view:last-child>view:last-child>text{
		color: #FF3C00;
		font-size: 40upx;
		font-weight: 550;
	}
</style>
